import React from 'react';
import { ButtonDefaultProps, ButtonProps } from './interface';
import styles from './index.module.scss';
import classNames from 'classnames';

const Button: React.FC<ButtonProps> = (props) => {
    const { btnType, size, className, style, children, icon, iconColor, isActiveAnim, loading, onClick } = { ...ButtonDefaultProps, ...props };

    const classes = classNames(styles.btn, className, {
        [styles[`type-${btnType}`]]: btnType,
        [styles[`size-${size}`]]: size,
    })    

    return (
        <button className={classes} style={style} onClick={onClick}>
            {icon && <div className={styles.icon} style={{fill: iconColor}}>{icon}</div>}
            {children}
        </button>
    );
};

export default Button;
